<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>延时导航栏</title>
<style>
ul,body {margin:0; padding:0; list-style:none; font-size:14px;}
a {text-decoration:none;}
.nav,.navL,.navR,#nUl,#nUl li,#nUl a,#nUl span {float:left;}
.nav{background:url(navBg.png) repeat-x 0 -72px;}
.navL{background:url(navBg.png) no-repeat;}
.navR{background:url(navBg.png) no-repeat right -36px; padding:5px 22px 6px 12px;}
#nUl{ line-height:25px;}
#nUl li{background:url(liBg.gif) no-repeat right 0;}
#nUl a { margin:0 5px}
#nUl span {padding:0 20px;color:#fff;}
/*#nUl a {background:url(hoverL.png) no-repeat;}
#nUl span {background:url(hoverR.gif) no-repeat right 0;}*/
li#noBg {background:none;}
#more {float:right; margin-left:106px;color:#fff;line-height:25px;}
#show {}
#show ul {border-radius:10px; background:#A2E0FF}
#ul1,
#ul2,
#ul3,
#ul4 {position:absolute; top:40px;}
#ul1 li,
#ul2 li ,
#ul3 li,
#ul4 li {float:left; margin:10px;}
#ul1 {left:0;display:none;}
#ul2 {left:40px; display:none;}
#ul3 {left:120px; display:none;}
#ul4 {left:200px; display:none;}
#show li {}
#show a:hover {text-decoration:underline; color:#000}
</style>
<script>
window.onload = function(){
	var oUl = document.getElementById('nUl');
	var aA = oUl.getElementsByTagName('a');
	var aSpan = oUl.getElementsByTagName('span');
	var oShow = document.getElementById('show');
	var aUl = oShow.getElementsByTagName('ul')
	var len = aA.length;
	var timer = null;
	var n = 0;
	var that = null;
	
	for(var i=0;i<len;i++){
		aA[i].index = i;

		//主导航栏悬停
		aA[i].onmouseover = function(){
			clearTimeout(timer);		//如果我是在aA[i]和aA[j]之间切换，都会先发生鼠标移出事件，无意中开了200ms的定时器，所以每次移入时，我们应该立即关闭它
			n = this.index;
			for(var i=0;i<len;i++){
				aA[i].style.cssText = '';
				aSpan[i].style.cssText = '';
				aUl[i].style.display = 'none';
			}
			this.style.cssText = 'background:url(hoverL.png) no-repeat';
			aSpan[n].style.cssText = 'background:url(hoverR.gif) no-repeat right 0';
			aUl[n].style.display = 'block';
		}
	
		//主导航栏移出
		aA[i].onmouseout = function(){
			n = this.index;
			this.style.cssText = '';
			aSpan[n].style.cssText ='';
			timer = setTimeout(function(){
				aUl[n].style.display = 'none';
			},200)
		};
		
		//子导航栏悬停
		aUl[i].onmouseover = function (){
			clearTimeout(timer);
		};
		
		//子导航栏移出
		aUl[i].onmouseout = function (){
			that = this;
			timer = setTimeout(function(){
				that.style.display = 'none';
			},700)
		};
		
	}
	
	
	
	
}
</script>
</head>
<body>
<div class="nav">
	<div class="navL">
  	<div class="navR">
      <ul id="nUl">
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#"><span>关于我们</span></a></li>
        <li><a href="#"><span>作品</span></a></li>
        <li id="noBg"><a href="#"><span>博客</span></a></li>
      </ul>
      <a id="more" href="#">更多&gt;&gt;</a>
    </div>
  </div>
</div>
<div id="show">
  <ul id="ul1">
  	<li><a href="#">最近更新</a></li>
    <li><a href="#">活动</a></li>
    <li><a href="#">报名试听</a></li>
    <li><a href="#">学院反馈</a></li>
  </ul>
  <ul id="ul2">
  	<li><a href="#">妙味课堂</a></li>
    <li><a href="#">培训方式</a></li>
    <li><a href="#">培训理念</a></li>
    <li><a href="#">联系我们</a></li></ul>
  <ul id="ul3">
  	<li><a href="#">巩固</a></li>
    <li><a href="#">MATRIX</a></li>
    <li><a href="#">留学E网</a></li>
    <li><a href="#">ECMall</a></li></ul>
  <ul id="ul4">
  	<li><a href="#">JS教程</a></li>
    <li><a href="#">弹出层效果动</a></li>
    <li><a href="#">3D球面标签云</a></li>
    <li><a href="#">Windows计算器</a></li></ul>
</div>
</body>
</html>
